<template>
	<el-card class="box-card">
		<div class="search">
			<el-input v-model="filterText" :suffix-icon="Search" placeholder="输入关键字过滤"> </el-input>
		</div>
		<div class="dept-tree">
			<el-tree
				ref="tree"
				:highlight-current="true"
				class="filter-tree"
				:data="deptList"
				:props="defaultProps"
				default-expand-all
				:filter-node-method="filterNode"
				@node-click="handleNodeClick"
			></el-tree>
		</div>
	</el-card>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue';
import { userStore } from '@/store';
import { Search } from '@element-plus/icons-vue';

const user = userStore();

const handleNodeClick = (data) => {
	user.setSelectNode(data);
};

const filterText = ref('');
watch(
	() => filterText.value,
	(val) => {
		tree.value.filter(val);
	},
	{}
);

const defaultProps = {
	children: 'childrens',
	label: 'deptName',
};

const deptList = ref([]);
onMounted(async () => {
	user.getDeptList({}).then(({ page }) => {
		deptList.value = page;
	});
});

const filterNode = (value, data) => {
	if (!value) return true;
	return data.deptName.indexOf(value) !== -1;
};

const tree = ref(null);
</script>

<style lang="scss" scoped>
.box-card {
	height: 100%;
	.filter-tree {
		margin-top: 10px;
		background-color: #f7f7f7;
		.el-tree {
			.el-tree-node > .el-tree-node__content:hover {
				background-color: red;
			}
		}
	}
}
</style>
